<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品管理</title>

  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../font/iconfont.css">
  <link rel="stylesheet" href="../../css/shangpinguanli/shangpinliebiao.css">
  <link rel="stylesheet" href="../../css/public.css">
  <link rel="stylesheet" href="../../font/wenben/iconfont.css">
  <script src="../../lib/session.js"></script>
  <script src="../../javaScript/public.js"></script>
  <script src="../../javaScript/shangpinguanli/data.js"></script>

  <script src="../../lib/jquery/jquery-3.6.0.js"></script>
  <script src="../../javaScript/index.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-10-5">
        <div class="mcol clear fen">
          <span class="fenl">商品分类</span>
          <input type="text" class="minput" id="input" placeholder="请选择分类" onclick="btnF()">
        </div>
        <div class="content">
          <ul class="clear one">
          </ul>
          <ul class="clear two">
          </ul>
          <ul class="clear three">
          </ul>
        </div>
        <div class="mcol">
          <span>下单时间</span>
          <input type="date" placeholder="订单号" class="minput">
        </div>
        <div class="mcol">
          <span>累计销量</span>
          <input type="text" placeholder="库存量" class="minput">

        </div>
        <div class="mcol">
          <span>库存量</span>
          <input type="text" placeholder="库存量" class="minput">
        </div>
        <div class="mcol">
          <span>商品名称</span>
          <input type="text" placeholder="商品名称" class="minput">
        </div>
        <div class="mcol">
          <span>商品编码</span>
          <input type="text" placeholder="商品编码" class="minput">
        </div>
        <div class="mcol">
          <span> SKU编码</span>
          <input type="text" placeholder="SKU编码" class="minput">
        </div>
        <div class="mcol">
          <span> 当前售价</span>
          <input type="text" class="minput">

        </div>
      </div>
      <div class="col-md-1-5" style="text-align: center;line-height: 140px;">
        <div class="mbutton-blue query">
          <span class="iconfont">&#xe633;</span>
          <span>搜索</span>
        </div>
        <div class="mbutton-white reset">
          <span class="iconfont">&#xe630;</span>
          <span>重置</span>
        </div>
      </div>
    </div>
  </div>
  <div class="label-page container">

  </div>
  <div class="modal fade" id="del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">？确认要删除选中项吗?</h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          <button type="button" class="btn btn-primary">取消</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 表格选项卡 -->
  <div class="container">
    <div class="row title-button">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-1 col-xs-1">
            <span class="iconfont icon-shujukuliebiao"></span>数据列表
          </div>
          <div class="mbutton-white del">
            <div data-toggle="modal" data-target="#del"><span class="iconfont">&#xe626;</span><span>删除</span></div>
          </div>
          <div class="mbutton-white long-mbutton daochub">
            <div><span class="iconfont"></span><span>导出</span></div>
          </div>

        </div>
      </div>
      <div class="content_right"> <button class="mbutton-white"><a href="../shangpinguanli/xinzengshangpin1.html">+
            新增</a></button></div>
    </div>
    <table class="mtable">
      <thead>
        <tr class="mwidth">
          <td>
            <input type="checkbox" id="" value="" class="box-checkbox allcheck">
          </td>
          <td>商品编码</td>
          <td>商品信息</td>
          <td>当前售价（元）</td>
          <td>成本价（元）</td>
          <td>库存量</td>
          <td>累计销量</td>
          <td>30日销量</td>
          <td>创建时间</td>
          <td>商品状态</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody id="mytbody">

      </tbody>
    </table>
    <div>
      <div class="col-md-7 col-xs-7">
        <input type="checkbox" class="box-checkbox all_box allcheck" value=""><span>全选</span>
      </div>
      <nav aria-label="Page navigation" class="col-md-4 col-xs-4 fpagenum">
        <div class="back stop">
          <span class="iconfont">&#xe64b;</span>
        </div>
        <ul class="pagenum">

        </ul>
        <div class="next">
          <span class="iconfont">&#xe62b;</span>
        </div>
      </nav>
      <div class="col-md-1 col-xs-1">
        <select name="" id="page_num">
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="30">30条/页</option>
          <option value="40">40条/页</option>
        </select>
      </div>
    </div>
  </div>


  </div>
  <script src="../../javaScript/shangpinguanli/shangpinliebiao.js"></script>
  <script>
    let arrFen = [
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
      { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
    ]

    function btnF() {

      $('.content').css({ 'display': 'block' })
    }
    function fenlei(data) {
      $.each(data, (index, item) => {
        $('.one').append(`
<li class="yi"><span>${item.btn1}<span class="iconfont icon-youjiantou"></span>
  </span></li>
`)
        $('.two').append(`
<li class="er"><span>${item.btn2}<span class="iconfont icon-youjiantou"></span>
  </span></li>
`)
        $('.three').append(`
<li class="san"><span>${item.btn3}
  </span></li>
`)
      })
    }
    fenlei(arrFen)
    $('.one').on('click', '.yi', function () {
      $('.two').find('li:last-child').css('visibility', 'hidden')
      $('.two').css({ "display": 'block', "left": '190px' })
      for (let i = 0; i < $('.yi').length; i++) {
        $('.yi').eq(i).css({ "background-color": "#FFFFFF", })
        $('.yi').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })
      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
    })
    $('.two').on('click', '.er', function () {


      for (let i = 0; i < $('.er').length; i++) {
        $('.er').eq(i).css({ "background-color": "#FFFFFF", })
        $('.er').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
      $('.three').css({ "display": 'block', "left": '380px' })
    })
    $(".three").on('click', '.san', function () {

      for (let i = 0; i < $('.san').length; i++) {
        $('.san').eq(i).css({ "background-color": "#FFFFFF", })
        $('.san').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

      }
      $(this).css({ "background-color": "#F5F7FA", })
      $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
      $($(this).parent().parent()[0]).css('display', 'none')
      $('#input').replaceWith(' <input type="text" class="minput put" id="input" placeholder="一级分类/二级分类/三级分类" onclick="btnF()">')
    })


  </script>

</body>


</html>